<template>
  <div>
  <!-- <el-header>Header</el-header> -->
      <el-drawer
      size="50%"
      :withHeader="false"
      title="乐跑设置"
      :visible.sync="drawer"
      direction="btt"
    >
      <lepao-settings-by-area :zone="schoolRuler.run_zone_list"></lepao-settings-by-area>
    </el-drawer>

    <el-row type="flex">
      <el-col><span style="font-size: 22px">湖北汽车工业学院</span></el-col>
    </el-row>

    <el-row type="flex">
      <el-col>
        <span style="font-size: 14px; float: right">规则/成绩</span>
      </el-col>
    </el-row>

    <el-row type="flex">
      <el-col>
        <span class="run-user-number">今天已有<span style="color: #5ABE88;">{{ schoolRuler.today_run_user_num }}</span>名校友完成跑步</span>
      </el-col>
    </el-row>

    <el-row type="flex">
      <el-col
        ><i
          @click="setting"
          style="font-size: 22px; float: right; margin-top: 15px"
          class="el-icon-setting"
        ></i
      ></el-col>
    </el-row>

    <el-row type="flex">
      <el-col>
        <div class="">
          <div style="text-align: -webkit-center">
            <div class="mark">
              <div style="margin-top: 20%; color: #606266">有效总次数</div>
              <div style="font-size: 70px; color: #5ABE88">
                {{ totalNum(schoolRuler.total_num) }}
              </div>
              <div style="font-size: 12px; color: #9D9D9D">
                学期目标:{{ schoolRuler.term_num === 0 ? '待定' : schoolRuler.term_num + '次' }}
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>


    <el-row type="flex">
      <el-col>
          <div class="item">
            <el-button type="success" round @click="toLepaoSettings" >进入乐跑</el-button>
          </div>
       </el-col>
    </el-row>

    <el-row style="margin-top: 5vh" type="flex">
      <el-col :span="3" v-for="(dayByList, index) in weekData" :key="index">
        <div style="text-align: center;">
            <!-- dayByList.distance !== '0' ? 'success' : '' -->
            <!-- typeByBtn(dayByList.distance)  -->
          <div><el-button :type=" dayByList.distance !== '0' ? 'success' : '' " circle>{{dayByList.date}}</el-button></div>
          <div class="distanceFont">{{ dayByList.distance }}</div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import LepaoSettingsByArea from "./LepaoSettingsByArea.vue";
import { lepaoGetSchoolRuler, lepaoRunStart } from "@/api/run";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { LepaoSettingsByArea },
  props: {},
  data() {
    //这里存放数据
    return {
      drawer: false,
      weekData: [],
      schoolRuler: {
        zone: [],
        weekData: { list: [] },
        today_run_user_num: 0,
        //有效次数
        total_num: 0,
        term_num: 0,
      },
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    typeByBtn(distance) {
      console.log(distance);
      return distance !== "0" ? "success" : "";
    },
    toLepaoSettings() {
      // 开始跑步
      lepaoRunStart().
      then((result) => {
          // if(result.code === 0){
          this.$tips(`开始跑步`,"success");
          //让父组件刷新，查看提交状态
          this.$emit("status");
          // }
      }).catch((err) => {
          
      });
    },
    setting() {
      this.drawer = true;
    },
    //跑步规则
    lepaoGetSchoolRuler() {
      lepaoGetSchoolRuler()
        .then((data) => {
          // if (response.code === 0) {
          // const { data } = response;
          const area = data.run_zone_list;

          //整个返回对象
          this.schoolRuler = data;

          // // 打卡点
          // this.zone = area;
          // [{date: "一", distance: "1.80"}, {date: "二", distance: "0"}, {date: "三", d...
          this.weekData = data.weekData.list;
          // //今日跑步人数
          // this.todayRunUserNum = data.today_run_user_num;
          // //有效次数
          // this.total_distance = data.total_distance;
          // //学期目标
          // this.term_num = data.term_num;
          // }
        })
        .catch((err) => {this.$message.error(err.message)});
    },
    totalNum(num) {
        return num;
      for (let index = 0; index <= num; index++) {
        setTimeout(() => {
          this.schoolRuler.total_num = index;
        }, index * 25);
      }
    },
  },
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {
    this.lepaoGetSchoolRuler();

    this.$bus.$on("refreshZoneId", (area) => {
      console.log("refreshZoneId被调用");
      this.schoolRuler.run_zone_list = area;
      // this.lepaoGetSchoolRuler();
    });
  },
  //声明周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {
    this.$bus.$off("refreshZoneId");
  }, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style>
.el-main{
    height: 60vh;
}
.el-footer{
    margin: 0;
}
.el-row--flex {
  /* display: flex; */
  justify-content: space-evenly;
}
.el-button--success{
    color: #FFFFFF;
    background-color: #5ABE88;
    border-color: #5ABE88;
}

.data{
    text-align: center;
    justify-content: center;
}
.item {
  margin-top: 15vh;
  text-align: center;
}
.run-user-number {
  font-size: 12px;
  color: #9D9D9D;
}
.mark {
  margin: 15vh 0 0 0;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  border: solid #F0F0F0 3.5px;
}
.distanceFont{
    font-size: 10px;
    margin-top: 10px;
    color: #5ABE88;
}
</style>